<template>
  <!-- 巡检管理-巡检记录 -->
  <div class="inspection-record">
    <a-card class="card card1" title="查询">
      <div class="input-box">
        <div class="item">
          <div class="text">任务名称</div>
          <a-input
            class="input"
            placeholder="请输入"
            v-model:value="formData.inspectionName"
          >
          </a-input>
        </div>
        <div class="item">
          <div class="text">任务类型</div>
          <a-select
            class="input"
            placeholder="请选择"
            v-model:value="formData.taskType"
          >
            <a-select-option
              v-for="item in inspectionTaskTypeList"
              :key="item.typeId"
              :value="item.typeId"
              >{{ item.typeName }}</a-select-option
            >
          </a-select>
        </div>
        <div class="item">
          <div class="text">机构名称</div>
          <a-input
            class="input"
            placeholder="请选择"
            v-model:value="formData.organizationName"
          >
          </a-input>
        </div>
        <div class="item">
          <div class="text">执行状态</div>
          <a-select
            class="input"
            placeholder="请选择"
            v-model:value="formData.instanceStatus"
          >
            <a-select-option :value="0">执行中</a-select-option>
            <a-select-option :value="1">已完成</a-select-option>
            <a-select-option :value="2">人工停止</a-select-option>
            <a-select-option :value="3">异常停止</a-select-option>
          </a-select>
        </div>
        <div class="item Last-run-time">
          <div class="text">最后一次运行时间</div>
          <a-range-picker
            class="input picker"
            show-time
            v-model:value="formData.lastRunningTime"
            @change="changeLastRunningTime"
          />
        </div>
        <div class="item button-box">
          <a-button class="button" @click="clickReset">重置</a-button>
          <a-button type="primary" @click="clickQuery">查询</a-button>
        </div>
      </div>
    </a-card>
    <a-card class="card card2" title="列表">
      <template #extra>
        <div class="button-box">
          <a-popconfirm
            title="确认删除？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="clickDel('批量删除', undefined)"
          >
            <a-button class="button">批量删除</a-button>
          </a-popconfirm>
        </div>
      </template>
      <a-table
        class="table"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :row-selection="{
          selectedRowKeys: tableSelectedRowKeys,
          onChange: onSelectChange,
        }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'taskType'">
            <div class="taskType">
              <span v-show="record.taskType === 0">实时任务</span>
              <span v-show="record.taskType === 1">单次计划任务</span>
              <span v-show="record.taskType === 2">周期计划任务</span>
            </div>
          </template>
          <template v-if="column.dataIndex === 'instanceStatus'">
            <div class="instanceStatus">
              <span v-show="record.instanceStatus === 0">执行中</span>
              <span v-show="record.instanceStatus === 1">已完成</span>
              <span v-show="record.instanceStatus === 2">人工停止</span>
              <span v-show="record.instanceStatus === 3">异常停止</span>
            </div>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <div class="operation">
              <a-popconfirm
                title="确认删除？"
                ok-text="确认"
                cancel-text="取消"
                @confirm="clickDel('删除', record)"
              >
                <span>删除</span>
              </a-popconfirm>
            </div>
          </template>
        </template>
      </a-table>
      <a-pagination
        v-model:current="formData.pageNum"
        v-model:page-size="formData.pageSize"
        :total="formData.total"
        :show-total="total => `共 ${total} 条数据`"
        :show-size-changer="true"
        @change="changePagination"
      />
    </a-card>
  </div>
</template>
<script setup lang="ts">
  // 引入组件
  // 引入方法
  import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
  import api from '@/axios/api.js'
  import { message } from 'ant-design-vue'
  const props = defineProps({})
  const emits = defineEmits([])
  // 自定义状态
  const formData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0,
    inspectionName: undefined, //巡检任务名称
    resourceType: undefined, //	资源类型
    taskType: undefined, //任务类型
    instanceStatus: undefined, //执行状态0: 执行中,1: 已完成 ,2: 人工停止,3：异常停止
    startTime: undefined,
    endTime: undefined,
    organizationName: undefined, //机构名称
    lastRunningTime: undefined,
  })
  const columns = [
    { title: '任务名称', dataIndex: 'inspectionName' },
    { title: '资源类型', dataIndex: 'resourceTypeName' },
    { title: '任务类型', dataIndex: 'taskTypeName' },
    { title: '告警数量', dataIndex: 'alarmNum' },
    { title: '调度类型', dataIndex: 'scheduleTypeName' },
    { title: '执行状态', dataIndex: 'instanceStatus' },
    { title: '操作', dataIndex: 'operation' },
  ] //列表配置
  const tableData = ref([]) //列表数据
  const tableSelectedRowKeys = ref([]) //表格选中的值
  const inspectionTaskTypeList = ref([]) //巡检任务类型列表
  onMounted(() => {
    getInspectionTaskTypeList()
    getInspectionRecordList(formData.value)
  })
  // 自定义方法
  //获取巡检任务类型列表
  const getInspectionTaskTypeList = async () => {
    const res = await api.getInspectionTaskTypeList()
    inspectionTaskTypeList.value = res.data.data
  }
  //获取巡检记录列表
  const getInspectionRecordList = async data => {
    const res = await api.getInspectionRecordList(data)
    console.log('获取巡检记录列表', res)
    tableData.value = res.data.data.records.map(item => {
      return { ...item, key: item.id }
    })
    formData.value.total = res.data.data.total
  }
  //删除巡检任务
  const delInspectionRecord = async data => {
    const res = await api.delInspectionRecord(data)
    if (res.data.code === 200) {
      message.success('删除记录任务成功')
      getInspectionRecordList(formData.value)
    } else {
      message.error('删除巡检记录失败', res.data.msg)
    }
  }
  //最后一次运行时间改变
  const changeLastRunningTime = (dates, dateStrings) => {
    formData.value.startTime = dateStrings[0]
    formData.value.endTime = dateStrings[1]
  }
  //表格选中改变
  const onSelectChange = selectedRowKeys => {
    tableSelectedRowKeys.value = selectedRowKeys
  }
  //点击重置
  const clickReset = () => {
    formData.value = {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      inspectionName: undefined, //巡检任务名称
      resourceType: undefined, //	资源类型
      taskType: undefined, //任务类型
      instanceStatus: undefined, //执行状态0: 执行中,1: 已完成 ,2: 人工停止,3：异常停止
      startTime: undefined,
      endTime: undefined,
      organizationName: undefined, //机构名称
      lastRunningTime: undefined,
    }
    getInspectionRecordList(formData.value)
  }
  //点击查询
  const clickQuery = () => {
    getInspectionRecordList(formData.value)
  }
  //分页改变
  const changePagination = (current, pageSize) => {
    formData.value.pageNum = current
    formData.value.pageSize = pageSize
    getInspectionRecordList(formData.value)
  }
  //点击删除
  const clickDel = (value, record) => {
    if (value === '删除') {
      delInspectionRecord([record.id])
    } else if (value === '批量删除') {
      delInspectionRecord(tableSelectedRowKeys.value)
    }
  }
</script>
<style lang="less" scoped>
  .inspection-record {
    .card1 {
      margin-bottom: (20 / @vh);
      .input-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .item {
          display: flex;
          align-items: center;
          margin-bottom: (20 / @vh);
          width: 25%;
          .text {
            margin-right: (10 / @vw);
            width: (100 / @vw);
            text-align: right;
          }
          .input {
            width: (200 / @vw);
          }
          .picker {
            width: (400 / @vw);
          }
          .button {
            margin-right: (10 / @vw);
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
        .Last-run-time {
          width: 75%;
          .text {
            width: (160 / @vw);
          }
        }
        .button-box {
          width: 100%;
        }
      }
    }
    .card2 {
      .button-box {
        .button {
          margin-right: (10 / @vw);
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .table {
        margin-bottom: (20 / @vh);
        .operation {
          span {
            margin-right: (10 / @vw);
            color: @tc;
            cursor: pointer;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
</style>
